﻿@model ProductDetailsModel
@using Nop.Web.Models.Catalog;
@if (Model.PictureModels.Count > 0)
{
    //we do not use Model.DefaultPictureModel in mobile version
    var defaultPicture = Model.PictureModels.FirstOrDefault();
    <div class="default-picture">
        <img id="default-image" alt="@defaultPicture.AlternateText" src="@defaultPicture.FullSizeImageUrl" title="@defaultPicture.Title" />
    </div>
}
@if (Model.PictureModels.Count > 1)
{
    <script type="text/javascript">
        function UpdateMainImage(url) {
            //show progress
            $.mobile.showPageLoadingMsg();
            $('#default-image').attr("src", url);
            //hide progress
            $.mobile.hidePageLoadingMsg();
        }
    </script>
    <ul class="picture-thumbs">
        @foreach (var picture in Model.PictureModels)
        {
            <li class="picture">
                <img src="@picture.ImageUrl" alt="@picture.AlternateText" title="@picture.Title" onclick="UpdateMainImage('@(picture.FullSizeImageUrl)')" />
            </li>
        }
    </ul>
}